<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import type { UploadProps } from "element-plus";
import Konva from "konva";
import { ElMessage } from "element-plus";
import {
  UploadPic,
  getList as getBranchList,
  saveOfficePoint
} from "@/api/idp/branch";
import { getList as getClientList } from "@/api/idp/client";
import {
  currentOption,
  dragStartEvent,
  dragoverEvent,
  dropEvent,
  formDialog,
  commitForm,
  deviceList,
  form,
  tipVisible
} from "./api";

const layer = ref();
const stage = ref();
const backGroundPic = ref("");

const idDraggable = ref(false);
const handlTitlePicSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  console.log(response, uploadFile, uploadFile);
  currentOption.orgPic = response;
  backGroundPic.value = "/api/idp/static/pic/" + response;
  console.log(backGroundPic.value);
  idDraggable.value = true;
  stage.value.container().style.background =
    " url(" + backGroundPic.value + ")";
  stage.value.container().style.backgroundRepeat = "no-repeat";
  stage.value.container().style.backgroundSize = "contain";
  console.log(stage.value.container());
  console.log(backGroundPic.value);
};
onMounted(async () => {
  const s = new Konva.Stage({
    container: "container",
    width: Number(
      window
        .getComputedStyle(document.getElementsByClassName("main-content")[0])
        .width.replace("px", "")
    ),
    height:
      Number(
        window
          .getComputedStyle(document.getElementsByClassName("el-scrollbar")[0])
          .height.replace("px", "")
      ) - 150
  });
  layer.value = new Konva.Layer();
  s.add(layer.value);
  // 禁用右键菜单
  window.document.oncontextmenu = function () {
    return false;
  };
  stage.value = s;

  getBranchList().then(res => {
    orgList.value = res;
  });
  getClientList().then(res => {
    deviceList.value = res;
  });
  document.addEventListener("mousemove", mousemoveHandler);
});
onUnmounted(() => {
  document.removeEventListener("mousemove", mousemoveHandler);
});
const orgList = ref<any[]>([]);

const orgChange = e => {
  console.log(e);
  orgList.value.forEach(item => {
    if (item.id == e) {
      currentOption.org = item;
      console.log(currentOption);
    }
  });
  getClientList().then(res => {
    deviceList.value = res;
  });
};

const clickSaveBtn = () => {
  console.log(currentOption.orgPic.toString());
  const json = stage.value.toJSON();
  saveOfficePoint({
    backGroundImg: currentOption.orgPic.toString(),
    jsonStr: json,
    branchId: currentOption.org.id
  }).then(() => {
    ElMessage({
      message: "保存数据成功",
      type: "success"
    });
  });

  console.log(json);
};

const triggerRef = ref({
  getBoundingClientRect() {
    return position.value;
  }
});

const position = ref({
  top: 0,
  left: 0,
  bottom: 0,
  right: 0
});
const mousemoveHandler = e => {
  position.value = DOMRect.fromRect({
    width: 0,
    height: 0,
    x: e.clientX,
    y: e.clientY
  });
};
</script>

<template>
  <div>
    <el-tooltip
      v-model:visible="tipVisible"
      content="Bottom center"
      placement="bottom"
      effect="light"
      trigger="click"
      virtual-triggering
      :virtual-ref="triggerRef"
    >
      <template #content>
        主机名称：XXXXX<br />
        IP地址：XXXXX<br />
        显示主机各种信息<br />
        表现形式需要大家提意见
      </template>
    </el-tooltip>
    <el-row>
      <el-col :span="12">
        <ul class="img-ul">
          <li>
            <img
              src="../../../assets/other/idp/computer.png"
              id="tuoputu_computer"
              @dragstart="dragStartEvent"
              draggable="true"
              alt=""
            />
          </li>
          <li>
            <img
              src="../../../assets/other/idp/macbook.png"
              id="tuoputu_macbook"
              @dragstart="dragStartEvent"
              :draggable="idDraggable"
              alt=""
            />
          </li>
          <li>
            <img
              src="../../../assets/other/idp/printer.png"
              id="tuoputu_printer"
              @dragstart="dragStartEvent"
              :draggable="idDraggable"
              alt=""
            />
          </li>
          <li>
            <img
              src="../../../assets/other/idp/usb.png"
              id="tuoputu_usb"
              @dragstart="dragStartEvent"
              :draggable="idDraggable"
              alt=""
            />
          </li>
          <li>
            <img
              src="../../../assets/other/idp/camera.png"
              id="tuoputu_camera"
              @dragstart="dragStartEvent"
              :draggable="idDraggable"
              alt=""
            />
          </li>
          <li>
            <img
              src="../../../assets/other/idp/router.png"
              id="tuoputu_router"
              @dragstart="dragStartEvent"
              :draggable="idDraggable"
              alt=""
            />
          </li>
        </ul>
      </el-col>
      <el-col :span="12">
        <el-select
          v-model="currentOption.org"
          placeholder="Select"
          size="default"
          clearable
          @change="orgChange"
          style="width: 140px; margin-right: 10px"
        >
          <el-option
            v-for="item in orgList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-upload
          class="file-upload"
          action=""
          :auto-upload="true"
          :show-file-list="false"
          :http-request="UploadPic"
          :on-success="handlTitlePicSuccess"
        >
          <el-button type="primary">开始设计</el-button>
        </el-upload>
        <el-button type="primary" @click="clickSaveBtn">保存</el-button>
        <el-button type="primary" @click="clickSaveBtn">重置</el-button>
      </el-col>
    </el-row>
    <el-row>
      <div
        id="container"
        @dragover="dragoverEvent"
        @drop="dropEvent($event, layer)"
        class="container-div"
      />
    </el-row>
    <el-dialog v-model="formDialog" title="设置节点信息" width="30%">
      <el-form ref="forRef" :model="form">
        <el-form-item label="绑定终端" prop="deviceId">
          <el-select v-model="form.id" placeholder="请选择终端">
            <el-option
              v-for="item in deviceList"
              :label="item.hostname"
              :value="item.id"
              :key="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设备类型" prop="deviceTpye">
          <el-radio-group v-model="form.deviceTpye">
            <el-radio label="个人PC" />
            <el-radio label="柜台" />
            <el-radio label="服务器" />
            <el-radio label="其他" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="扩展地址" prop="url">
          <el-input
            v-model="form.url"
            disabled
            placeholder="暂时未开放的功能"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="formDialog = false">取消</el-button>
          <el-button type="primary" @click="commitForm"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.img-ul {
  list-style-type: none;
}

.img-ul li {
  display: inline-block;
  margin-right: 10px;
}

.img-ul li img {
  width: 40px;
  height: 40px;
}

.container-div {
  background: #e9ebec;
}

.file-upload {
  display: inline-block;
  margin-right: 10px;
}
</style>
